<!--
 * ============LICENSE_START=======================================================
 * SDC
 * ================================================================================
 * Copyright (C) 2022 Nordix Foundation. All rights reserved.
 * ================================================================================
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 * ============LICENSE_END=========================================================
-->
<div class="interface-definition">
  <loader [display]="isLoading" [size]="'large'" [relative]="true"></loader>
  <div class="left-column">
    <div *ngIf="isInterfaceListEmpty()">
      <div class="interface-empty-msg">
        <div>{{ 'INTERFACE_DATA_EMPTY' | translate }}</div>
      </div>
    </div>
    <div class="top-add-btn add-btn" [ngClass]="{'disabled': readonly}" *ngIf="!component.isService()" data-tests-id="add-operation" (click)="onSelectInterfaceOperation(undefined, undefined)">
    {{ 'INTERFACE_ADD_OPERATION' | translate }}
    </div>
    <div class="operation-list" *ngIf="!this.component.isService() || this.enableFlag || this.selectedInstanceData && !this.selectedInstanceData.name === 'SELF'">
      <div *ngIf="!isInterfaceListEmpty()">
        <div class="expand-collapse" *ngIf="isOperationListEmpty()">
          <a class="link"
            [ngClass]="{'disabled': isAllExpanded()}"
            (click)="collapseAll(false)">{{ 'INTERFACE_EXPAND_ALL' | translate }}
          </a> |
          <a class="link"
            [ngClass]="{'disabled': isAllCollapsed()}"
            (click)="collapseAll()">
            {{ 'INTERFACE_COLLAPSE_ALL' | translate }}
          </a>
        </div>

        <div class="interface-row" *ngFor="let interface1 of interfaces">
          <div class="interface-accordion" (click)="interface1.toggleCollapse()">
            <span
                class="chevron-container"
                [ngClass]="{'isCollapsed': interface1.isCollapsed}"
                *ngIf="isOperationListEmpty()">
                <svg-icon
                    name="caret1-down-o"
                    mode="primary"
                    size="small">
                </svg-icon>
            </span>
            <span class="interface-name">{{interface1.type}}</span>
          </div>

          <div class="generic-table" *ngIf="!interface1.isCollapsed && isOperationListEmpty()">
            <div class="header-row table-row">
              <span
                  class="cell header-cell field-name header-name">
                  {{ 'INTERFACE_HEADER_NAME' | translate }}
              </span>
              <span class="cell header-cell field-description header-description">
                {{ 'INTERFACE_HEADER_DESCRIPTION' | translate }}
              </span>
              <span class="cell field-delete" *ngIf="!readonly"><span class="delete-col-header"></span></span>
            </div>
            <div class="data-row" *ngFor="let operation of interface1.operations">
              <span class="cell field-name"
                    (click)="onSelectInterfaceOperation(interface1, operation)">{{operation.name}}</span>
              <span class="cell field-description" (click)="onSelectInterfaceOperation(interface1, operation)"
                    [ngClass]="{'collapsed': operation.isCollapsed}">{{operation.getDescriptionEllipsis()}}
                <span class="more-or-less link" (click)="operation.toggleCollapsed($event)">
                    {{!operation.isEllipsis ? '' : operation.isCollapsed ? 'More' : 'Less'}}
                </span>
              </span>
              <span class="cell field-delete" *ngIf="!readonly">
                <button class="table-delete-btn" (click)="onRemoveOperation(operation)"></button>
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="right-column" *ngIf="component.isService()">
    <div class="add-btn" [ngClass]="{'disabled': !enableFlag}" data-tests-id="add-operation" (click)="onSelectInterfaceOperation(undefined, undefined)">
      {{ 'INTERFACE_ADD_OPERATION' | translate }}
    </div>
    <tabs #hierarchyNavTabs tabStyle="simple-tabs" class="gray-border">
        <tab tabTitle="Composition">
            <div class="hierarchy-nav-container">
                <loader [display]="loadingInstances" [size]="'medium'" [relative]="true" [loaderDelay]="500"></loader>
                <div class="hierarchy-header white-sub-header">
                    <span tooltip="{{component.name}}">{{component.name}}</span>
                </div>
                <div *ngIf="!instancesNavigationData || instancesNavigationData.length === 0">No data to display</div>
                <hierarchy-navigation class="hierarchy-nav"
                        (updateSelected)="onInstanceSelectedUpdate($event)"
                        [displayData]="instancesNavigationData"
                        [selectedItem]="selectedInstanceData?.uniqueId"
                        [displayOptions]="hierarchyInstancesDisplayOptions"></hierarchy-navigation>
            </div>
        </tab>
    </tabs>
  </div>
</div>
